<template>
  <div class="sidebar">
    <el-row>
      <el-col>
        <div class="grid-content">
          <el-menu router >
            <el-sub-menu index="/practice">
              <template #title>
                <span>练习室</span>
              </template>
              <el-menu-item index="/mypractice" style="min-width: 149px">
                我的练习室
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>
        <div>
          <el-menu router class="demo-tabs">
            <el-menu-item index="/cache" style="margin-top: 10px"
              >缓存</el-menu-item
            >
            <el-menu-item index="/collection">收藏</el-menu-item>
            <el-menu-item index="/history">历史</el-menu-item>
          </el-menu>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "sidebar",
}




</script>
  
<style scoped lang="less">
.sidebar {
  width: 150px;
  background-color: #f5f7f9;
  margin-left: 100px;

  .grid-content {
    border-radius: 10px;
    background-color: white;
    margin: 10, 20px;
  }
}
</style>